<template>
  <div class="moa-table" ref="moaTable">
    <div class="moa-table__head" ref="moaTableHead">
      <table class="table" ref="tableFixedTop">
        <colgroup>
          <col :width="item.width" v-for="(item, index) in table.tableHead" :key="index">
        </colgroup>
        <thead>
        <tr>
          <th v-for="(item, index) in table.tableHead" :key="index" :class="item.fixed ? 'is-hidden': ''">
            {{item.title}}
            <span
              class="moa-table__sort"
              v-if="item.sortable"
              @click="handleSort(index, item.tag, item.chinese,item.sort)"
              :class="'moa-table__sort--' + item.sort"
            ></span>
          </th>
        </tr>
        </thead>
      </table>
    </div>
    <div class="moa-table__body" ref="tableScrollBox">
      <div class="moa-table__empty" v-if="table.loading">
        <van-loading size="24px" vertical>数据加载中...</van-loading>
      </div>
      <table class="table">
        <colgroup>
          <col :width="item.width" v-for="(item, index) in table.tableHead" :key="index">
        </colgroup>
        <tbody>
        <tr v-for="(item, index) in table.tableData" :key="index">
          <td v-for="(itemTd, indexTd) in table.tableHead" :key="indexTd" :class="itemTd.fixed ? 'is-hidden': ''">
            {{itemTd.canFormat == true ? numFormat(item[itemTd.tag]) : item[itemTd.tag]}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="moa-table__fixed" v-if="table.fixed" ref="moaTableFixed">
      <div class="moa-table__fixed-head" v-if="table.fixedHead">
        <table class="table">
          <colgroup>
            <col :width="item.width" v-for="(item, index) in table.tableHead" :key="index">
          </colgroup>
          <thead>
          <tr>
            <th v-for="(item, index) in table.tableHead" :key="index">
              {{item.title}}
              <span class="moa-table__sort" v-if="item.sortable"></span>
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <div class="moa-table__fixed-body" v-if="table.fixedLeft">
        <table class="table" ref="tableFixedLeft">
          <colgroup>
            <col :width="item.width" v-for="(item, index) in table.tableHead" :key="index">
          </colgroup>
          <tbody>
          <tr v-for="(item, index) in table.tableData" :key="index">
            <td v-for="(itemTd, indexTd) in table.tableHead" :key="indexTd">
              {{itemTd.canFormat == true ? numFormat(item[itemTd.tag]) : item[itemTd.tag]}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'FixedTable',
    props: ['data'],
    data() {
      return {
        table: this.data,
        initSort: '',
        initSortRank: ''
      }
    },
    watch: {
      'data.tableHead': function(val) {
        this.handleScroll()
      },
      'data.reset': function(val) {
        this.handleSortReset()
      },
      deep: true
    },
    methods:{
      handleScroll() {
        let moaTable = this.$refs.moaTable
        let moaTableFixed = this.$refs.moaTableFixed
        let tableScroll = this.$refs.tableScrollBox
        let tableHead = this.$refs.moaTableHead
        let fixedTop = this.$refs.tableFixedTop
        let fixedLeft = this.$refs.tableFixedLeft
        tableHead.style.height = fixedTop.clientHeight + 'px'
        moaTableFixed.style.height = moaTable.clientHeight + 'px'
        tableScroll.style.top = fixedTop.clientHeight + 'px'
        let fixedLeftWidth = ''
        this.table.tableHead.forEach(item => {
          if (item.fixed) {
            fixedLeftWidth = Math.floor(fixedLeftWidth) + Math.floor(item.width)
          }
        })
        moaTableFixed.style.width = fixedLeftWidth + 'px'
        tableScroll.addEventListener('scroll', () => {
          let scrollTop = tableScroll.scrollTop
          let scrollLeft = tableScroll.scrollLeft

          fixedLeft.style.top = - scrollTop + 'px'
          fixedTop.style.left = - scrollLeft + 'px'
        }, false)
      },
      handleSort(index, tag, chinese, sort) {
        this.$emit('passTag', tag)
        this.$emit('passChinese', chinese)
        this.handleSortReset()

        if (sort == 'none') {
          this.table.tableHead[index].sort = 'desc'
          this.$emit('passSort',this.table.tableHead[index].sort )
          this.table.tableData.sort((a, b) => {
            if(chinese) {
              return b[tag] - a[tag]
            }else {
              return b[tag].localeCompare(a[tag])
            }
            // if(a.sort && b.sort) {
            //   return b[tag] - a[tag]
            // }

          })
          this.$emit('tableDataSort', this.table.tableData)
          // this.sortChangeSeqNo(this.table.tableData)

        } else if (sort == 'desc') {
          this.table.tableHead[index].sort = 'asc'
          this.$emit('passSort',this.table.tableHead[index].sort )
          this.table.tableData.sort((a, b) => {
            if(chinese) {
              return a[tag] - b[tag]
            }else {
              return a[tag].localeCompare(b[tag])
            }
            // if(a.sort && b.sort ) {
            //   return a[tag] - b[tag]
            // }

          })
          this.$emit('tableDataSort', this.table.tableData)
          // this.sortChangeSeqNo(this.table.tableData)

        } else if (sort == 'asc') {
          this.table.tableHead[index].sort = 'none'
          this.$emit('passSort',this.table.tableHead[index].sort )
          // if (this.initSortRank == 'asc') {
          //   this.table.tableData.sort((a, b) => {
          //     if(a.sort && b.sort) {
          //       return a[this.initSort] -  b[this.initSort]
          //     }
          //
          //   })
          //   // this.sortChangeSeqNo(this.table.tableData)
          // } else if (this.initSortRank == 'desc') {
          //   this.table.tableData.sort((a, b) => {
          //     if(a.sort && b.sort) {
          //       return b[this.initSort] -  a[this.initSort]
          //     }
          //
          //   })
          //   // this.sortChangeSeqNo(this.table.tableData)
          // }


        }
      },
      handleSortReset() {
        this.table.tableHead.forEach(item => {
          item.sort = 'none'
        })
      },
      getInitSort() {
        let arr = this.table.tableHead.filter(item => {
          return (item.initSort == 'asc' || item.initSort == 'desc')
        })
        if (arr.length > 0) {
          this.initSort = arr[0].tag
          this.initSortRank = arr[0].initSort
        }
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
      // 当点击端口号排序时改变序号
      // sortChangeSeqNo(tableData) {
      //   // TODO 改变序号
      //   tableData.forEach((item, index) => {
      //     if(index !== 0) {
      //       item.SEQ_NO = index;
      //     }
      //   })
      // }
    },
    mounted() {
      this.handleScroll()
      this.getInitSort()
    },
  }
</script>

<style lang="scss" scoped>
  .moa-table {
    overflow: hidden;
    height: 100%;
    position: relative;

    &__empty {
      position: absolute;
      padding: 20px;
      left: 0;
      right: 0;
      text-align: center;
      color: #666;
    }

    &__head {
      overflow: hidden;
      position: relative;

      table {
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    th {
      height: 22px;
      overflow: hidden;
    }

    tr {
      background: #fff;

      &:nth-child(2n) {
        background: #f2f2f2;
      }
    }

    &__body {
      overflow: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-overflow-scrolling: touch;
    }

    &__fixed {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      pointer-events: none;

      &-head {
        position: relative;
        z-index: 2;
      }

      &-body {
        position: relative;
        z-index: 1;

        table {
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }

    &__sort {
      display: inline-block;
      vertical-align: middle;
      height: 16px;
      width: 12px;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        left: 0;
        border: 6px solid #fff;
        border-left-color: transparent;
        border-right-color: transparent;
      }

      &::before {
        border-top-width: 0;
      }

      &::after {
        bottom: 0;
        border-bottom-width: 0;
      }

      &--asc {
        &::after {
          display: none;
        }

        &::before {
          top: 3px;
        }
      }

      &--desc {
        &::after {
          bottom: 5px;
        }

        &::before {
          display: none;
        }
      }
    }

    .is-hidden {
      color: transparent;
    }
  }
</style>
